import React from 'react'
import styles from './NameVerify.less'
import { Tag, Skeleton } from 'antd'
import GraphqlComponent from 'DHBStatement/libs/components/GraphqlComponent'
import gql from 'graphql-tag'
import PropTypes from 'prop-types'
import Header from '../../components/Header/index'
const AGQL = (props) => componet => GraphqlComponent(componet, props, 'system')

const headerData = {
  title: '实名认证',
  hasPopover: true,
  popoverContent: <p style={{ fontSize: 13 }}>需上传完整证件，审核通过后才能开启全部功能限制</p>,
  hasSubNav: true,
  subNavItem: [
    {
      title: '首页',
      link: true
    },
    {
      title: '系统',
      link: false
    },
    {
      title: '公司设置',
      link: true
    }
  ]
}
function NameVerify ({ loading, data }) {
  const { credentialsInfomation = {} } = data
  // 法人/经办人身份证
  const { idCard = {} } = credentialsInfomation
  // 营业执照
  const { businessLicense = {} } = credentialsInfomation
  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <Header header={headerData} />
      </div>
      <Skeleton active loading={loading}>
        <div className={styles.content}>
          <h2 className={styles.certificate}>证件</h2>
          <span className={styles.theText}>（需上传完整证件，审核通过后才能开启全部功能）</span>
          <span className={styles.realName}>
            {idCard.status === 'T' ? <Tag color='#87d068'>实名认证已通过</Tag> : <Tag color='#FF0000'>实名认证未通过</Tag>}
          </span>
          <div className={styles.listImg}>
            <span className={styles.businessLicenseBox}>{businessLicense.credentialsName}</span>
            <span className={styles.idCardBox}>{idCard.credentialsName}</span>
            <ul className={styles.imgA}>
              <li className={styles.imgB}>
                <div className={styles.a}>
                  <img src={idCard.fileUrl} />
                </div>
                <span>证件号：{idCard.credentialsId}</span>
              </li>
              <li className={styles.imgB}>
                <div className={styles.b}>
                  <img src={businessLicense.fileUrl} />
                </div>
                <span>证件号：{businessLicense.credentialsId}</span>
              </li>
            </ul>
            <div className={styles.footer}>
              为什么要实名认证:<br />
                  1、试用客户，实名认证通过，可获得14天的免费试用时间<br />
                    2、正式客户，实名认证通过，购买我司任一服务，都可收到我司免费提供的电子合同<br />
              （电子合同和纸质合同具有同样的法律效应，大大缩减原纸质合同的线下周转期）<br />
              3、所有客户，实名认证审核通过后，即可开启全部功能权限<br />
            </div>
          </div>
        </div>
      </Skeleton>
    </div>
  )
}

NameVerify.propTypes = {
  loading: PropTypes.bool,
  data: PropTypes.object
}

export default AGQL({
  query: gql`
    query{
      credentialsInfomation{
        idCard{
          fileUrl
          credentialsId
          credentialsName
          status
        }
        businessLicense{
          credentialsId
          credentialsName
          status
          fileUrl
        }
      }
    }
  `
})(NameVerify)

// export default connect()(NameVerify)
